<template>
  <view class="personal">
    <view class='content-body'>
      <!--已认证 -->
      <view class='content-body-top' v-show="userInfo.userAuth=='success'">
        <view class='top-left-box top-item-box'>
          <view class='personPic'>
            <uv-avatar :src="url+userInfo.userAvatar"></uv-avatar>
          </view>
          <view class='personInfo'>
            <view style="width:calc(100% - 40px)">
              <view class='name-flex'>
                <view></view>
                <view class='personInfo-name'>
                  {{userInfo.userName}}
                </view>
                <view class="personInfo-role" v-if="userInfo.CompanyType==0">平台</view>
                <view class="personInfo-role-custom" v-if="userInfo.CompanyType==1">客户</view>
              </view>
              <view class="personInfo-role-jurisdiction">
                <view class="personInfo-company">
                  {{userInfo.userCompany}}
                </view>
              </view>
            </view>
            <view class="switch-company" @click="goSelectRole">
              <view class="personal-login">切换</view>
              <view class="cuIcon-right text-blue"><uv-icon name="arrow-right" color="#409EFF"></uv-icon></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 未认证 -->
      <view class='content-body-top' v-show="userInfo.userAuth=='notAuth'">
        <view class='top-left-box top-item-box'>
          <view class='personPic'>
            <uv-avatar :src="url+userInfo.userAvatar"></uv-avatar>
          </view>
          <view class='personInfo'>
            <view style="width:calc(100% - 40px)">
              <view class='name-flex'>
                <view></view>
                <view class='personInfo-name'>
                  {{userInfo.userName}}
                </view>
              </view>
              <view class="personInfo-role-jurisdiction">
                <view class="personInfo-company">
                  尚未完成企业认证
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 未登录 -->
      <view class='content-body-top' v-show="userInfo.userAuth=='notLogin'">
        <view class='top-left-box top-item-box'>
          <view class='personPic'>
            <uv-avatar :src="null"></uv-avatar>
          </view>
          <view class='personInfo'>
            <view style="width:calc(100% - 40px)">
              <view class='name-flex'>
                <view></view>
                <view style="margin-left: 10px;" @click="goLogin">
                  <uv-button iconColor="#fff" type="primary" size="normal" icon="fingerprint">点击授权信息</uv-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 未认证提示 -->
      <view class="unverified" v-if="userInfo.userAuth=='notAuth'">
        <view class="unverified-left">
          <image src="@/static/user/not_auth_icon.svg" class="unverified-img"></image>
          <view>
            <view class="unverified-left-top">
              <text>尚未完成企业认证</text>
            </view>
            <view class="unverified-left-bottom">
              <text>认证完成可享各项服务</text>
            </view>
          </view>
        </view>
        <view class="unverified-right">
          <text class="unverified-text" @click="openAuthPopup">去认证</text>
        </view>
      </view>
      <view class='content-body-bottom'>
        <view class='bottom-header'>
          <view class='bottom-header-left'>联系我们</view>
        </view>
        <view class='bottom-body'>
          <view class='bottom-body-item'>
            <view class='viewBox infoBox'>
              <text>联系人名称</text>
              <text>{{relationInfo.ContactName}}</text>
            </view>
          </view>
          <view class='bottom-body-item'>
            <view class='viewBox infoBox'>
              <text>联系人电话</text>
              <text>{{relationInfo.ContactTelephone}}</text>
            </view>
          </view>
          <view class='bottom-body-item'>
            <view class='viewBox infoBox'>
              <text>联系人手机</text>
              <text>{{relationInfo.ContactMobilePhone}}</text>
            </view>
          </view>
          <view class='bottom-body-item'>
            <view class='viewBox infoBox'>
              <text>联系人邮箱</text>
              <text>{{relationInfo.ContactMail}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="clear_login" v-if="userInfo.userAuth!='notLogin'">
        <uv-button type="error" text="退出登录" size="normal" @click="openClearLogin"></uv-button>
      </view>
    </view>
  </view>
  <appAuthPopup v-model="visible"></appAuthPopup>
  <uv-modal :show="clearLoginVisible" @confirm="confirmClearLogin" @close="closeClearLogin" @cancel="closeClearLogin"
    showCancelButton closeOnClickOverlay title="提示" content='退出登录后部分功能不可用,确定要执行此操作吗？' width="500rpx"></uv-modal>
</template>

<script>
	import appAuthPopup from '@/pages/components/app-auth-popup/app-auth-popup'
	import store from '@/store'
	import {serverPort} from '@/utils/request'
	import customRouter from '@/utils/customRouter.js'
	export default {
		data() {
			return {
				url:'',
				visible:false,
				clearLoginVisible:false
			};
		},
		components:{
			appAuthPopup
		},
		computed: {
			userInfo() {
				return store.state.userInfo
			},
			relationInfo(){
				return store.state.relationInfo
			}
		},
		onLoad(options){
			this.url=serverPort;
			if(options.popup=='true'){
				this.openAuthPopup()
			}
		},
		methods:{
			goLogin(){
				customRouter.navigateTo({
					url:'/loginPackages/wxLogin/wxLogin'
				})
			},
			goSelectRole(){
				customRouter.navigateTo({
					url:'/pages/tabbar/user/selectRole/selectRole'
				})
			},
			openAuthPopup(){
				this.visible=true
			},
			openClearLogin(){
				this.clearLoginVisible=true
			},
			closeClearLogin(){
				this.clearLoginVisible=false
			},
			confirmClearLogin(){
				store.commit('userInfo/clearUserInfo')
				this.closeClearLogin()
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './user.css';
</style>